<style>
    *{
        font-family: 微软雅黑;
    }
    .head_bg img{
        margin: 0 auto;
        display: block;
        width: 100%;
        height: auto;
        background-size: 100% 100%;
    }
    .head_title{
        text-align: center;
        font-size: 18px;
        margin-top: 20px;
        color:#000000;

    }
    .head_intro{
        text-align: center;
        margin-top: 10px;
    }
    .time{
        color: #d8b37e;
        margin-left: 10px;
        /*font-size: 18px;*/
        margin-top: 3px;
    }
    .intro{
        margin-top: 20px;
        text-indent: 25px;
        line-height: 30px;
    }

</style>

<div class="modal fade bs-example-modal-static" id="add1" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
     data-backdrop="static" aria-hidden="true" >
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                <h4 class="modal-title">图片上传</h4>
            </div>
            <div class="modal-body">
                <form enctype="multipart/form-data" method="post" id="saveIchnographyForm">
                    <div class="form-group">
                        <input type="file" id="imgFile" name="imgFile"/>
                        <input type="hidden" id="literatureImg" name="literatureImg"/>
                    </div>
                    <div class="form-group" id="btn-su">
                        <input type="file" id="papersFile" name="papersFile"/>
                        <input type="hidden" id="literatureFile" name="literatureFile"/>
                    </div>
                    <input type="hidden" id="exhibtionId" name="exhibtionId" th:value="${exhibtionId}"/>
                    <input type="text" class="form-control" style="margin-top: 20px" name="literatureTitle" placeholder="文章标题">
                    <input type="text" class="form-control" style="margin-top: 20px" name="literatureContent" placeholder="文章内容">
                    <input type="text" class="form-control" style="margin-top: 20px" name="literatureX" id="literatureX" placeholder="x轴坐标">
                    <input type="text" class="form-control" style="margin-top: 20px" name="literatureY" id="literatureY" placeholder="y轴坐标">

                    <div class="form-group" style="margin-top: 20px">
                        <select name="literatureType" id="select" class="form-control" placeholder="文章类型" style="width: 100%;height: 100%;">
                            <option value="">--请选择--</option>
                            <option value="1">有音频</option>
                            <option value="2">无音频</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="saveIchnography()"  data-dismiss="modal">添加展位</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade bs-example-modal-static" id="edit" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
     data-backdrop="static" aria-hidden="true" >
    <div class="modal-dialog" role="document">
        <div class="modal-content" style="max-height:800px;overflow-y:auto;overflow-x:hidden;background-color: #fff">
            <form enctype="multipart/form-data" method="post" id="saveIchnographyForm1">
                <div class="modal-header">
                    <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                    <h4 class="modal-title">图片上传</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <img id="imagesFire" src="" alt="图片" style="width: 100%;height: 100%;">
                    </div>
                    <div class="form-group">
                        <input type="file" id="imgFile1" name="imgFile"/>
                        <input type="hidden" id="literatureImg1" name="literatureImg"/>
                    </div>
                    <div class="form-group">
                        <input type="file" id="papersFile1" name="papersFile"/>
                        <input type="hidden" id="literatureFile1" name="literatureFile"/>
                    </div>
                    <input type="hidden" id="exhibtionId1" name="exhibtionId" th:value="${exhibtionId}"/>
                    <input type="text" class="form-control" style="margin-top: 20px" id="literatureTitle" name="literatureTitle" placeholder="文章标题">
                    <input type="text" class="form-control" style="margin-top: 20px" id="literatureContent" name="literatureContent" placeholder="文章内容">
                    <!--<input type="text" class="form-control" style="margin-top: 20px" id="literatureType" name="literatureType" placeholder="文章类型">-->
                    <div class="form-group" style="margin-top: 20px">
                        <select name="literatureType" id="literatureType" class="form-control" placeholder="文章类型" style="width: 100%;height: 100%;">
                            <option value="">--请选择--</option>
                            <option value="1">有音频</option>
                            <option value="2">无音频</option>
                        </select>
                    </div>
                    <div class="form-group">

                        <div class="row">
                            <div class="col-md-12">
                                <div class="panel panel-default">
                                    <div class="panel-body">
                                        <!--<div class="head_bg fileImgs1"><input type="file" name='img4'>-->
                                        <!--<img style="width: 100%;height: 500px;background-size: 100% 100%" src=""  id="fileImgs4" >-->
                                        <!--</div>-->
                                        <hr/>
                                        <div class=""><img src="../screen/images/time1.png" th:src="@{/images/time1.png}" width="23px" height="23px"><span class="time" id="timeS">2018-08-16</span></div>
                                        <div class="" style="margin-top: 10px"><img src="../screen/images/map1.png" th:src="@{/images/map1.png}" width="23px" height="23px"><span class="time">东华门，东南角落</span></div>
                                        <div class="intro"></div>
                                        <div class="slide"><img style="display: block;margin: 0 auto" width="40px" height="25px" src="../screen/images/slide.png" th:src="@{/images/slide.png}"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <div class="panel-btns">
                                            <a href="" class="panel-close">×</a>
                                            <a href="" class="minimize">−</a>
                                        </div>
                                        <h4 class="panel-title">展览 作品</h4>
                                    </div>
                                    <div class="panel-body" id="imagesUrl">

                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="form-group" id="adut" >
                        <!--音乐播放器 加载-->
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="hidden" name="literatureId" id="ichnographyId" value="">  <!-- 用来修改的文章Id-->
                    <input type="hidden" name="exhibitionId" th:value="${exhibtionId}"/>    <!--文章相关的展厅Id-->
                    <button type="button" class="btn btn-primary" onclick="updateliteratureId()" data-dismiss="modal">修改</button>
                    <button type="button" class="btn btn-danger" onclick="dele()">删除</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </form>
        </div>
    </div>
</div>


<div class="col-sm-12">
    <div class="row">
        <button class="btn btn-success" onclick="add(this)">修改</button>
    </div>
    <div class="row filemanager bjx1">

    </div>
</div>
<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    var exhibitionList = [[${exhibitionList}]];
    var literatureList = [[${literatureList}]];

    var showurl=[[${showUrl}]];
    var exhibitionId = exhibitionList[0].exhibitionId;
    console.log(literatureList);


    //点击添加按钮置状态；
    var sts;
    function add(e) {
        if(sts==1){
            sts=0;
            e.innerHTML="修改"
        }else{
            sts=1;
            e.innerHTML="新增"
        }
    }

    //页面初始化当前页面展位位置
    $(function () {
        var url= showurl+'imges/'+exhibitionList[0].exhibitionImg;
        $(".bjx1").css('background-image',"url("+url+")");
        //展示展位
        var str=""
        literatureList.forEach(function (item,index) {
            var x = item.literatureX+"%"
            var y = item.literatureY+"%"
//            str+="<img src=\"../../images/image/hall1.png\"  style=\"top:"+y+";left:"+x+";\" id=\""+item.literatureId+"\" >\n"
            str+=" <div class=\"imgHall\" style=\" margin-left: -25px;margin-top: -25px;position: absolute;top:"+y+";left:"+x+"\" id="+item.literatureId+" onclick='findOnly(this)'>\n" +
                "            <img src=\"../../images/image/hall1.png\" >\n" +
                "        </div>"
        });
        $(".bjx1").append(str)

    });


    //点击页面新增展位
    $('.bjx1').click(function(e) {
        var xx = e.originalEvent.x || e.originalEvent.layerX || 0;
        var yy = e.originalEvent.y || e.originalEvent.layerY || 0;
        var cdimg1  = $('.bjx1').width();
//        console.log($(this).offset().left+2)
//        console.log($(this).offset().top+2)
        var x=((xx-$(this).offset().left-2)/cdimg1*100).toFixed(2); //宽
        var y=((yy-$(this).offset().top-2)/500*100).toFixed(2); //高
//        var x=((xx-262)/cdimg1*100).toFixed(2); //宽
//        var y=((yy-188)/500*100).toFixed(2); //高
        $("#literatureX").val(x);
        $("#literatureY").val(y);
        if(sts==1){
            $('#add1').modal('show');
        }

    });
    //新增展位页面
    function saveIchnography() {
        var exhibtionId = $("#exhibtionId").val();
        var saveIchnographyForm = $("#saveIchnographyForm").serialize();
        $.post("/literature/saveLiterature", saveIchnographyForm, function (data) {
            if(data > 0){
                alert("成功");
                $.goTo(/*[[@{/literature/literatureList}]]*/"./floor_show.html", {"exhibtionId":exhibtionId});
            }else{
                alert("失败");
            }
        });
    }
    //修改
    var literatureId="";
    function findOnly(e) {
        literatureId=e.id;
        //阅读点击量
        $.post('/literature/updateLiteratureForCount',{"literatureId":e.id},function (data) {
        });
        //查询
        $.post("literature/findOneForLiterature",{"literatureId":e.id},function (data) {
            var url= showurl+data.literatureImg;
            var audiourl= showurl+data.literatureFile;
            console.log(audiourl)
            $("#imagesFire").attr("src",url);
            $("#literatureTitle").val(data.literatureTitle);
            $("#literatureContent").val(data.literatureContent)
            $("#literatureType").val(data.literatureType);
            $(".intro").text(data.literatureContent);
            var time=data.literatureTime.substring(0,10)
            $("#timeS").text(time);
//         $("#audioSrc").attr('src',audiourl);
//         $("#fileFire").attr('href',audiourl);
            $("#fileImgs4").attr('src',url);
//         $("#fileName3").attr('src',url);
            $("#literatureFile1").val(data.literatureFile)
            $("#literatureImg1").val(data.literatureImg)
            if(data.literatureFile!=""){
                myFunction(audiourl);
            }else{
                $("#adut").empty()
            }
            var str="";

            $("#imagesUrl").empty()
            if(data.literatureChildList.length>0){
                $("#imagesUrl").empty()
                data.literatureChildList.forEach(function (t) {
                    str+="<div class=\"col-md-6 \">\n" +
                        "     <img src="+showurl+t.literatureChildImg+" onclick=\"gotoE()\" style=\"width: 100%;height: 230px;display: block;background-size: 100% 100%\" alt=\"\">\n" +
                        "      <span style=\"display: block;text-align: center;margin-top: 10px\">"+t.literatureChildTitle+"</span>\n" +
                        "</div>"
                });
            }else{
                $("#imagesUrl").empty();
                str+="<button class=\"btn btn-primary\" type=\"button\" onclick='btnGo1()' >添加子文章</button>"
            }


            $("#imagesUrl").append(str)
            if(sts!=1){
                $('#edit').modal('show');
            }
        });


//     if(sts!=1){
////         $('#edit').modal('show');
//     }
    }
    //创建MP3
    function myFunction(y)
    {
        $("#adut").empty()
        var x = document.createElement("AUDIO");
        x.setAttribute("src", y);
        x.setAttribute("controls", "controls");
        $("#adut").append(x);
    }
    //跳转
    function btnGo1() {
        $.goTo(/*[[@{/literatureChild/literatureChildList}]]*/"./literature.html", {"literatureId":literatureId});
    }
    function gotoE() {
        $('#edit').modal('hide')
        $('#edit').attr('data-dismiss','modal')
        $.goTo(/*[[@{/literatureChild/literatureChildList}]]*/"./literature.html", {"literatureId":literatureId});
    }

    /*]]>*/
</script>
<script type="text/javascript" th:inline="javascript">
    $("#imgFile").fileinput({
        language: 'zh', //设置语言
        uploadUrl: "literature/getImgFileName", //上传的地址
        allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
        //uploadExtraData:{"id": 1, "fileName":'123.mp3'},
        uploadAsync: true, //默认异步上传
        showUpload: true, //是否显示上传按钮
        showRemove: true, //显示移除按钮
        showPreview: true, //是否显示预览
        showCaption: false,//是否显示标题
        browseClass: "btn btn-primary", //按钮样式
        dropZoneEnabled: false,//是否显示拖拽区域
        minImageWidth: 600, //图片的最小宽度
        minImageHeight: 600,//图片的最小高度
        //maxImageWidth: 1000,//图片的最大宽度
        //maxImageHeight: 1000,//图片的最大高度
        //maxFileSize:0,//单位为kb，如果为0表示不限制文件大小
        //minFileCount: 0,
        maxFileCount: 10, //表示允许同时上传的最大文件个数
        enctype: 'multipart/form-data',
        validateInitialCount: true,
        previewFileIcon: "<iclass='glyphicon glyphicon-king'></i>",
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
    }).on("fileuploaded", function (event, data, previewId, index) {
        $("#literatureImg").val(data.response);
    });
    $("#papersFile").fileinput({
        language: 'zh', //设置语言
        uploadUrl: "literature/getPapersFileName", //上传的地址
        allowedFileExtensions: ['mp3'],//接收的文件后缀
        //uploadExtraData:{"id": 1, "fileName":'123.mp3'},
        uploadAsync: true, //默认异步上传
        showUpload: true, //是否显示上传按钮
        showRemove: true, //显示移除按钮
        showPreview: true, //是否显示预览
        showCaption: false,//是否显示标题
        browseClass: "btn btn-primary", //按钮样式
        dropZoneEnabled: false,//是否显示拖拽区域
        minImageWidth: 600, //图片的最小宽度
        minImageHeight: 600,//图片的最小高度
        //maxImageWidth: 1000,//图片的最大宽度
        //maxImageHeight: 1000,//图片的最大高度
        //maxFileSize:0,//单位为kb，如果为0表示不限制文件大小
        //minFileCount: 0,
        maxFileCount: 10, //表示允许同时上传的最大文件个数
        enctype: 'multipart/form-data',
        validateInitialCount: true,
        previewFileIcon: "<iclass='glyphicon glyphicon-king'></i>",
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
    }).on("fileuploaded", function (event, data, previewId, index) {
        $("#literatureFile").val(data.response);
    });
    //    编辑
    $("#imgFile1").fileinput({
        language: 'zh', //设置语言
        uploadUrl: "literature/getImgFileName", //上传的地址
        allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
        //uploadExtraData:{"id": 1, "fileName":'123.mp3'},
        uploadAsync: true, //默认异步上传
        showUpload: true, //是否显示上传按钮
        showRemove: true, //显示移除按钮
        showPreview: true, //是否显示预览
        showCaption: false,//是否显示标题
        browseClass: "btn btn-primary", //按钮样式
        dropZoneEnabled: false,//是否显示拖拽区域
        minImageWidth: 600, //图片的最小宽度
        minImageHeight: 600,//图片的最小高度
        //maxImageWidth: 1000,//图片的最大宽度
        //maxImageHeight: 1000,//图片的最大高度
        //maxFileSize:0,//单位为kb，如果为0表示不限制文件大小
        //minFileCount: 0,
        maxFileCount: 10, //表示允许同时上传的最大文件个数
        enctype: 'multipart/form-data',
        validateInitialCount: true,
        previewFileIcon: "<iclass='glyphicon glyphicon-king'></i>",
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
    }).on("fileuploaded", function (event, data, previewId, index) {
        $("#literatureImg1").val(data.response);
    });
    $("#papersFile1").fileinput({
        language: 'zh', //设置语言
        uploadUrl: "literature/getPapersFileName", //上传的地址
        allowedFileExtensions: ['mp3'],//接收的文件后缀
        //uploadExtraData:{"id": 1, "fileName":'123.mp3'},
        uploadAsync: true, //默认异步上传
        showUpload: true, //是否显示上传按钮
        showRemove: true, //显示移除按钮
        showPreview: true, //是否显示预览
        showCaption: false,//是否显示标题
        browseClass: "btn btn-primary", //按钮样式
        dropZoneEnabled: false,//是否显示拖拽区域
        minImageWidth: 600, //图片的最小宽度
        minImageHeight: 600,//图片的最小高度
        //maxImageWidth: 1000,//图片的最大宽度
        //maxImageHeight: 1000,//图片的最大高度
        //maxFileSize:0,//单位为kb，如果为0表示不限制文件大小
        //minFileCount: 0,
        maxFileCount: 10, //表示允许同时上传的最大文件个数
        enctype: 'multipart/form-data',
        validateInitialCount: true,
        previewFileIcon: "<iclass='glyphicon glyphicon-king'></i>",
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
    }).on("fileuploaded", function (event, data, previewId, index) {
        $("#literatureFile1").val(data.response);
    });
</script>
<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/


    function updateliteratureId() {
        var exhibtionId = $("#exhibtionId").val();
        var saveIchnographyForm = $("#saveIchnographyForm1").serialize();
        $.post("/literature/updateLiterature", saveIchnographyForm, function (data) {
            if(data > 0){
                alert("修改成功");
//                $('#edit').modal('hide');
                $("#soldier-modal").remove()

                $.goTo("/literature/literatureList", {"exhibtionId":exhibtionId});
            }else{
                alert("修改失败");
            }
        });
    }
    var id="";
    //    function edit(obj) {
    //        id =$(obj).attr("id");
    //        $("#ichnographyId").val(id);
    //        var showurl=[[${showUrl}]];
    //        $.post("/literature/findOneForLiterature",{"exhibitionId":id},function (data) {
    //            console.log(data)
    //            $("#literatureTitle").val(data.literatureTitle);
    //            $("#literatureContent").val(data.literatureContent);
    //            $("#literatureType").val(data.literatureType);
    //            $("#imagesFire").attr("src",showurl+data.literatureImg);
    //            $("#fileFire").attr("href",showurl+data.literatureFile);
    //            $("#footer-title").val(data.ichnographyName);
    //            $("#literatureImg1").val(data.literatureImg);
    //            $("#literatureFile1").val(data.literatureFile);
    ////            $("#audioSrc").attr('src',audiourl);
    //        });
    //        $('#edit').modal('show');
    //    }


    function dele(){
        var floorId = $("#floorId").val();
        $.post("/literature/deleteLiterature",{"exhibitionId":id},function (data) {
            if(data>0){
                alert("删除成功");
                $("#soldier-modal").remove()
                $('#edit').modal('hide');
                $.goTo(/*[[@{/literature/literatureList}]]*/"./floor_show.html", {"floorId":floorId});
            }else{
                alert("删除失败")
            }
        })
        $('#edit').modal('hide');
    }

    function goToExhibition(obj) {
        var id = $(obj).attr("id");
        console.log("id",id);
    }


    $("#select").on("change",function () {
        if($(this).val()=="2"){
            $("#btn-su").css('display',"none")
        }else if($(this).val()=="1"){
            $("#btn-su").css('display',"block")
        }
    });


    $(function () {
        $(".slide").click(function () {
            $(".intro").slideToggle(function () {
//                $(this).css("height","500px")
            })
        })
    });
    $(function() {

        //建立一個可存取到該file的url
        function getObjectURL(file) {
            var url = null;
            if (window.createObjectURL != undefined) { // basic
                url = window.createObjectURL(file);
            } else if (window.URL != undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file);
            } else if (window.webkitURL != undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file);
            }
            return url;
        }

        //获取点击的图片元素
        var cdimg  = $('.fileImgs1').children('img');
        //获取上传图片的 input 标签元素
        var cdfile = $('.fileImgs1').children('input[type="file"]');
        //设置input 大小和图片一致
        cdfile.css({'width':cdimg.css('width'),'height':cdimg.css('height')});
        //input透明度为0,定位，优先级比图片高
        cdfile.css({'opacity':0,'position':'absolute','z-index':10});
        //判断input的图片文件改变则img的图片也替换为input选择的图片
        cdfile.change(function() {
            if (this.files && this.files[0]) {
                var objUrl = getObjectURL(this.files[0]);
                if (objUrl) {
                    $(this).siblings('img').attr("src", objUrl);
                }
            }
        });
        //获取点击的图片元素
        var cdimg1  = $('.fileImgs1').children('img');
        //获取上传图片的 input 标签元素
        var cdfile1 = $('.fileImgs1').children('input[type="file"]');
        //设置input 大小和图片一致
        cdfile1.css({'width':cdimg1.css('width'),'height':cdimg1.css('height')});
        //input透明度为0,定位，优先级比图片高
        cdfile1.css({'opacity':0,'position':'absolute','z-index':10});
        //判断input的图片文件改变则img的图片也替换为input选择的图片
        cdfile1.change(function() {
            if (this.files && this.files[0]) {
                var objUrl = getObjectURL(this.files[0]);
                if (objUrl) {
                    $(this).siblings('img').attr("src", objUrl);
                }
            }
        });
    })
    /*]]>*/
</script>